<template>
  <div class="app-container">
    <!--列表-->
    <div class="table-container flex-main">
      <el-tabs v-model="listQuery.noticeType" class="common-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="通知公告" name="1" />
        <el-tab-pane label="系统消息" name="2" />
      </el-tabs>
      <div class="table-container-header">
        <table-toolbar :remove="listQuery.noticeType==='1'" :create="listQuery.noticeType==='1'" @create="handleCreate" @refresh="handleFilter" @remove="removeRecord">
          <template slot="rightTool">
            <search v-model="listQuery.noticeTitle" :placeholder="'请输入'+(listQuery.noticeType==='1'?'通知公告标题':'系统标题')" @search="handleFilter" />
          </template>
        </table-toolbar>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column type="selection" width="60" />
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="标题" prop="noticeTitle" min-width="400" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.noticeType===1">
              <span v-if="scope.row.sendStatus===1" class="color-primary common-cursor" @click="handleLook(scope.row.id)">{{ scope.row.noticeTitle }}</span>
              <span v-else>{{ scope.row.noticeTitle }}</span>
            </div>
            <div>
              <span v-if="scope.row.noticeType===2" class="color-primary common-cursor" @click="handleLook(scope.row.id)">{{ scope.row.noticeAbstract }}</span>
              <span v-else class="color-default">{{ scope.row.noticeAbstract }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="通知对象" prop="noticeCategory" width="150" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.noticeCategory==='MEMBER'" class="color-primary ">指定会员</span>
            <span v-if="scope.row.noticeCategory==='USER'" class="color-primary ">指定用户</span>
            <span v-if="scope.row.noticeCategory==='ALL'">全体用户</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="sendStatus" width="90" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.sendStatus===0">未发布</span>
            <span v-if="scope.row.sendStatus===1" class="color-primary">已发布</span>
            <span v-if="scope.row.sendStatus===2" class="color-danger">已撤销</span>
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority" width="90" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.priority===0">低</span>
            <span v-if="scope.row.priority===1" class="color-success">中</span>
            <span v-if="scope.row.priority===2" class="color-primary">高</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdBy" sortable align="center" label="发布人" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.createdBy | optionUserFormat }}</template>
        </el-table-column>
        <el-table-column prop="startTime" sortable label="起止时间" width="280">
          <template slot-scope="scope">
            {{ scope.row.startTime | formatDate(T.DATE_TIME_FMT) }}&nbsp;~&nbsp;
            <template v-if="scope.row.endTime">
              <span v-if="scope.row.endTime<new Date().getTime()" class="color-danger ">{{ scope.row.endTime | formatDate(T.DATE_TIME_FMT) }}</span>
              <span v-else>{{ scope.row.endTime | formatDate(T.DATE_TIME_FMT) }}</span>
            </template>
            <template v-else>永久</template>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" sortable label="发布时间" width="160">
          <template slot-scope="scope">{{ scope.row.sendTime | formatDate }}</template>
        </el-table-column>
        <el-table-column prop="cancelTime" sortable label="撤销时间" width="160">
          <template slot-scope="scope">{{ scope.row.cancelTime | formatDate }}</template>
        </el-table-column>

        <el-table-column v-if="listQuery.noticeType==='1'" :key="T.uuid()" label="操作" align="center" width="90" fixed="right">
          <template slot-scope="scope">
            <template v-if="scope.row.createdUserId!=='0'">
              <button-option v-if="scope.row.sendStatus===1" icon="iconQrcode" icon-type="svg" skin="primary" title="二维码" @click="handleQrcode(scope.row)" />
              <button-option v-if="scope.row.sendStatus===0" icon="el-icon-s-promotion" skin="primary" title="发布" @click="handleNoticePublish(scope.row)" />
              <button-option v-if="scope.row.sendStatus===2" icon="el-icon-s-promotion" skin="primary" title="重新发布" @click="handleNoticePublish(scope.row)" />
              <button-option v-if="scope.row.sendStatus===1" icon="el-icon-refresh-left" skin="danger" title="撤销发布" @click="handleNoticeRevoke(scope.row)" />
              <button-option v-if="scope.row.sendStatus===0 || scope.row.sendStatus===2" icon="el-icon-edit" skin="primary" title="编辑" @click="handleUpdate(scope.row)" />
              <button-option v-if="scope.row.sendStatus!==1" icon="el-icon-delete" skin="danger" title="删除" @click="handleRemoveSingle(scope.row)" />
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
    <model-dialog
      title="H5二维码"
      :visible.sync="dialogVisible"
      width="220px"
      :show-close="false"
      @close="dialogVisible=!dialogVisible">
      <div class="preview-qrcode-container">
        <div id="qrCode" ref="qrCodeDiv" class="qrcode" />
        <div class="scan-tip">手机扫码预览</div>
      </div>
    </model-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        noticeType: '1',
        name: undefined,
        sort: this.common.SORT_DEFAULT,
        noticeUserType: 'admin'
      },

      multipleSelectionRecords: [],
      dialogVisible: false
    }
  },
  watch: {
    'listQuery.noticeType': function(val) {
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleTabClick() {

    },
    handleLook(id) {
      this.$router.push({ path: '/content/notice/details', query: { id: id }})
    },
    // 表格自带方法开始
    /**
     * 全选/反选
     */
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /**
     * 表格行数据单击
     */
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**
     * 表格列排序
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    async fetchData() {
      const response = await this.$store.dispatch('noticePage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },

    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    /**
     * 重置
     */
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT,
        noticeTitle: undefined
      }

      this.fetchData()
    },

    /* 新增*/
    handleCreate() {
      this.$router.push({ name: 'systemNoticeCreate', query: { type: this.listQuery.noticeType, userType: this.listQuery.noticeUserType }})
    },

    /* 编辑*/
    handleUpdate(row) {
      this.$router.push({ name: 'systemNoticeCreate', query: { id: row.id }})
    },

    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    removeRecord() {
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('noticeRemove', ids).then(response => {
            this.handleReset()
            this.$modal.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        this.$modal.msgWarning('请选择要删除的记录')
      }
    },
    handleNoticeRevoke(row) {
      this.$confirm('您确定撤销[' + row.noticeTitle + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('noticeRevoke', row.id).then(response => {
          this.$modal.msgSuccess('撤销成功')
          this.handleFilter()
        }).catch(() => {
          row.status = !row.status
        })
      }).catch(() => {
        row.status = !row.status
      })
    },
    handleNoticePublish(row) {
      this.$confirm('您确定发布[' + row.noticeTitle + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('adminUserPublishNotice', {
          id: row.id,
          scope: row.noticeCategory
        }).then(response => {
          this.$modal.msgSuccess('发布成功')
          this.fetchData()
        }).catch(() => {
          row.status = !row.status
        })
      }).catch(() => {
        row.status = !row.status
      })
    },
    handleQrcode(row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        document.getElementById('qrCode').innerHTML = ''
        new QRCode(this.$refs.qrCodeDiv, { //
          text: this.T.getUrl() + '#/notice/h5/preview/' + row.id,
          width: 120,
          height: 120,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
      })
    }

  }
}
</script>
